<template>
    <h2>基本使用</h2>
    <p>支持整数、小数、科学计数法和超大数计算</p>
    <div class="yong_ui_btn">
        <UiButton :type="active === 0 ? 'info' : ''" @click="hanldeSet(0)">整数</UiButton>
        <UiButton :type="active === 1 ? 'info' : ''" @click="hanldeSet(1)">小数</UiButton>
        <UiButton :type="active === 2 ? 'info' : ''" @click="hanldeSet(2)">科学计数法</UiButton>
        <UiButton :type="active === 3 ? 'info' : ''" @click="hanldeSet(3)">超大数</UiButton>
    </div>
    <div class="component_item">
        <div class="p_20">
            <div class="yong_ui_input_num">
                <input v-model="val1" />
                <input v-model="val2" />
            </div>
            <div class="yong_ui_btn">
                <UiButton type="info" @click="addNum">相加</UiButton>
                <UiButton type="info" @click="subtrNum">相减</UiButton>
                <UiButton type="info" @click="multNum">相乘</UiButton>
                <UiButton type="info" @click="divNum">相除</UiButton>
            </div>
            <p class="show_num">{{ resVal }}</p>
        </div>
        <pre class="code top_no_radius" v-pre>
    &lt;div class="yong_ui_btn">
        &lt;UiButton type="info" @click="hanldeSet(0)">整数&lt;/UiButton>
        &lt;UiButton type="info" @click="hanldeSet(1)">小数&lt;/UiButton>
        &lt;UiButton type="info" @click="hanldeSet(2)">科学计数法&lt;/UiButton>
        &lt;UiButton type="info" @click="hanldeSet(3)">超大数&lt;/UiButton>
    &lt;/div>
    &lt;div>
        &lt;div>
            &lt;input v-model="val1" />
            &lt;input v-model="val2" />
        &lt;/div>
        &lt;div class="yong_ui_btn">
            &lt;UiButton type="info" @click="addNum">相加&lt;/UiButton>
            &lt;UiButton type="info" @click="subtrNum">相减&lt;/UiButton>
            &lt;UiButton type="info" @click="multNum">相乘&lt;/UiButton>
            &lt;UiButton type="info" @click="divNum">相除&lt;/UiButton>
        &lt;/div>
        &lt;p>{{ resVal }}&lt;/p>
    &lt;/div>
    
    
    &lt;script setup>
    import { add, subtract, multiply, divide, UiButton } from 'yong-ui'
    import { ref } from 'vue';
    const val1 = ref(1.2)
    const val2 = ref(1.4)
    const resVal = ref()
    const resVal = ref()
    const list = [[4, 10], [1.2, 1.4], [1.234e+100, 2.987e-30], ['1.7976931348623157e+309', 5e-324]]
    // 设置输入框数字
    const hanldeSet = (val) => {
        val1.value = list[val][0]
        val2.value = list[val][1]
    }
    // 加
    const addNum = () => {
        resVal.value = add(val1.value, val2.value)
    }
    // 减
    const subtrNum = () => {
        resVal.value = subtract(val1.value, val2.value)
    }
    // 乘
    const multNum = () => {
        resVal.value = multiply(val1.value, val2.value)
    }
    // 除
    const divNum = () => {
        resVal.value = divide(val1.value, val2.value)
    }
    &lt;/script>
        </pre>
    </div>
</template>
<script setup>
// import { add, subtract, multiply, divide, UiButton } from 'yong-ui'
import { ref } from 'vue';
import { add, subtract, multiply, divide, UiButton } from '../components'
const active = ref()
const val1 = ref(1.2)
const val2 = ref(1.4)
const resVal = ref()
const list = [[4, 10], [1.2, 1.4], [1.234e+100, 2.987e-30], ['1.7976931348623157e+309', 5e-324]]
// 设置数字
const hanldeSet = (val) => {
    val1.value = list[val][0]
    val2.value = list[val][1]
    active.value = val
}
// 加
const addNum = () => {
    resVal.value = add(val1.value, val2.value)
}
// 减
const subtrNum = () => {
    resVal.value = subtract(val1.value, val2.value)
}
// 乘
const multNum = () => {
    resVal.value = multiply(val1.value, val2.value)
}
// 除
const divNum = () => {
    resVal.value = divide(val1.value, val2.value)
}
</script>
<style lang="css" scoped>
.yong_ui_input_num input{
    height: 36px;
    width: 300px;
    padding: 6px 20px;
    border: 1px solid #adaeb2;
    border-radius: 4px;
    margin-right: 20px;
}
.yong_ui_btn{
    margin-top: 20px;
}
.show_num{
    word-break: break-word;
}
</style>